import {Utils, Event} from '../common.js'
import {WIDGET_DISPLAY_MODE, WIDGET_MENU_CONFIG} from './widget-const.js';
import {ToastMessager, MessagerLevel} from '../messager.js'

function _ComposeWidgetLayoutHTMLText(SUID) {
    return `
<section>
    <div id='${SUID}' class='d-flex justify-content-between'>
        <div class="slog_section_left d-flex align-items-center justify-content-center">
            <a href="javascript:;" class="slog_menu_a bi bi-plus" data-slog-menu-item=${WIDGET_MENU_CONFIG.CREATE} style="visibility:hidden"></a>
            <a href="javascript:;" class="slog_menu_a bi bi-list" data-slog-menu-item=${WIDGET_MENU_CONFIG.TOGGLE}></a>
        </div>
        <div class="slog_section_right"></div>
    </div>
</section>`;
}

function _OnMouseEnter(e) {
    e.target.firstElementChild.style.visibility = 'visible';
}
function _OnMouseLeave(e) {
    e.target.firstElementChild.style.visibility = 'hidden';
}

class WidgetEventDispatcher extends Event {
    constructor() {
        super();
    }
    static Event = Object.freeze({
        EVT_WIDGET_ACTIVED: 'evt_widget_actived',
        EVT_WIDGET_DEACTIVED: 'evt_widget_deactived',
        //EVT_WIDGET_DELETED: 'evt_widget_deleted',
        EVT_WIDGET_BEFORE_CREATE: 'evt_widget_before_create',
    });
};

class BaseWidget {
    constructor(sectionData, dispatcher) {
        this._sectionData = sectionData;
        this._mode = WIDGET_DISPLAY_MODE.UNKNOWN;
        this._dispatcher = dispatcher;
        this._dirty = true;
        this._layoutElem = undefined;
        this._menuContainerElem = undefined;
        this._contentContainerElem = undefined;
        this._viewContainerElem = undefined;
        this._editContainerElem = undefined;
    }
    get SUID() {return this._sectionData.SUID;}
    get layoutElem() {return this._layoutElem;}
    get mode() {return this._mode;}
    set backgroundColor(value) {this._layoutElem.style.backgroundColor = value;}
    get sectionData() {return undefined;}
    Init() {
        this._layoutElem = Utils.CreateHTMLElement(_ComposeWidgetLayoutHTMLText(this.SUID));
        this._menuContainerElem = this._layoutElem.firstElementChild.firstElementChild;
        this._menuContainerElem.addEventListener('mouseenter', _OnMouseEnter);
        this._menuContainerElem.addEventListener('mouseleave', _OnMouseLeave);
        this._contentContainerElem = this._layoutElem.firstElementChild.lastElementChild;
        this._viewContainerElem = Utils.CreateHTMLElement(`<div class="slog_full_percent"></div>`);
        this._editContainerElem = Utils.CreateHTMLElement(`<div class="widget-xx slog_full_percent"></div>`);
        return this;
    }
    Deinit() {
        this._menuContainerElem.removeEventListener('mouseenter', _OnMouseEnter);
        this._menuContainerElem.removeEventListener('mouseleave', _OnMouseLeave);
        this._dispatcher = undefined;
        return this;
    }
    SetMode(mode) {
        if (mode === this._mode) return this;
        switch (mode) {
            case WIDGET_DISPLAY_MODE.VIEW:
                this._contentContainerElem.append(this._viewContainerElem);
                this._editContainerElem.remove();
                if (this._dirty) {
                    this._UpdateView();
                }
                if (this._mode != WIDGET_DISPLAY_MODE.UNKNOWN) {
                    this._dispatcher.DispatchEvent(WidgetEventDispatcher.Event.EVT_WIDGET_DEACTIVED, this);
                }
                break;
            case WIDGET_DISPLAY_MODE.EDIT:
                this._contentContainerElem.append(this._editContainerElem);
                this._viewContainerElem.remove();
                if (this._dirty) {
                    this._UpdateEdit();
                }
                if (this._mode != WIDGET_DISPLAY_MODE.UNKNOWN) {
                    this._dispatcher.DispatchEvent(WidgetEventDispatcher.Event.EVT_WIDGET_ACTIVED, this);
                }
                break;
            case WIDGET_DISPLAY_MODE.UNKNOWN:
            default:
                ToastMessager.Show(`Can NOT set widget mode to 'UNKNOWN'`, MessagerLevel.WARN);
        }
        this._editContainerElem.classList.toggle("slog_border", mode == WIDGET_DISPLAY_MODE.EDIT);
        if (this._mode != WIDGET_DISPLAY_MODE.UNKNOWN) {
            this._dirty = false;
        }
        this._mode = mode;
        return this;
    }
    SwitchMode() {
        if (this._mode === WIDGET_DISPLAY_MODE.UNKNOWN) {
            ToastMessager.Show(`Can NOT switch widget mode of 'UNKNOWN'`, MessagerLevel.WARN);
            return this;
        }
        return this.SetMode(-this._mode);
    }
    _UpdateView() {}
    _UpdateEdit() {}
    _CloneObject(obj) {
        return JSON.parse(JSON.stringify(obj));
    }
}

export {WidgetEventDispatcher, BaseWidget};

